﻿<html>
<head>
    <title>Mari-Bird</title>
<style>
@font-face {
    font-family: "disney";
    /*src: url("font/disney.ttf");*/
    src: url("font/FOO.ttf");
}

section {
    position: relative;
}

article {
    position: absolute;
    top: 0;
    left: 0;
    background: url(img/highscore.png);
    margin: 0;
    padding: 0;
    width: 800px;
    height: 600px;
    display: none
}

table {
    width: 400px;
    margin: 50px 190px 30px;
    color: #FFF;
    font-family: disney  
}

table thead {
    text-align: center;
    font-size: 50px;  
}

table tbody {
    display: block;
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #FFF;
    background: url(img/highscore.png);
    font-size: 30px
}
table tr {
    padding: 20px
}

table td {padding: 10px}

table tr td:nth-child(even) {
    padding: 0 0 0 100px
}


button#save { background: none; border: 2px solid #FFF; padding: 10px 20px; color: #FFF; font-size: 17px; position:  absolute; right: 210px}
button#close {background: none; border: 2px solid #FFF; padding: 10px 20px; color: #FFF; font-size: 17px; float: right; margin-right: 210px}
button:hover {background: #000; cursor: pointer}

div {color: #FFF; margin: 200px; font-family: "disney";}
h2 {text-align: center; font-size: 40px}

#name:hover, #name:focus {background: #000}
#name {border: 2px solid #FFF; background:  none; padding: 10px 20px; font-size: 17px; color: #FFF; width: 300px;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script src="js/core/AnimatedSprite.js"></script>
<script src="js/core/StaticSprite.js"></script>
<script src="js/core/ImgLoader.js"></script>
<script src="js/core/MenuItem.js"></script>
<script src="js/core/Screen.js"></script>
<script src = "js/core/soundmanager2.js" ></script>
<script src ="js/map.js"></script>
<script src ="js/mapdata.js"></script>
<script src="js/character.js"></script>
<script src="js/player.js"></script>
<script src="js/monster.js"></script>
<script src="js/PiranhaPlant.js"></script>
<script src="js/mushroom.js"></script>
<script src="js/bullet.js"></script>
<script src="js/ListScreen.js"></script>
<script src="js/Game.js"></script>
<script src="js/soundCollection.js"></script>


<script>
const NUM_LIFE = 2;

var FPS =  60;
var GRAVITY = 0.35;
//  Define which keys are used in game
var Keys = {
	UP_ARROW: 38,
	DOWN_ARROW: 40,
	LEFT_ARROW: 37,
	RIGHT_ARROW: 39,
	SPACE: 32,
	PAUSE: 90
}; 
var AVAILABLE_KEYS =
	[ 	Keys.UP_ARROW,
		Keys.LEFT_ARROW,
		Keys.RIGHT_ARROW,
		Keys.SPACE,
		Keys.Z
	];

var MAX_SPEED = 5;
var MIN_SPEED = 3;

var _images;
var _isMute = false;
var _isMuteAudio = false;
var _game;

var _level = 0;
var __level = 0;
var _isPause = false;
var _live = NUM_LIFE;
var _score = 0;
var _scores = [];
var _speed = MIN_SPEED;
var _timeStart = 0;

var _menuScreen;
var _gameOverScreen;
var _winScreen;
var _welcomeScreen;
var _helpScreen;
var _gameEndScreen;
var _infoScreen;

window.onload = function(){
    // show high score
    $("button#close").click(function() {$("article#load-score").slideUp("slow");});
    // save high score to json file
    $("button#save").click(function() {
        // load json file
         $.getJSON('scores.json', function(json) {
            var name = $("#name").val();
            json.scores.push({
                "name": name,
                "score": _score
            });
            // sort before save
            json.scores.sort(function(a, b) {
               return b.score - a.score; 
            });
            
            $("table tbody").text("");
            for(var i = 0; i < json.scores.length; i++) {
                    $("<tr></tr>").appendTo($("table tbody"))
                                .append("<td>"+ json.scores[i].name+"</td><td>"+json.scores[i].score+"</td>");   
            }
                
             var mapStr = JSON.stringify(json);
             $.ajax({
                 url:"test-json.php",
                 data: "score=" + mapStr,
                 type: "POST",
                 success: function(p) {
                     alert("success");
                 }
             });
         });
        $("article#save-score").slideUp("slow");
    });
	setup();
    SoundSetup();
    
    if(_isMute)
        soundManager.stop('theme');
    else
        soundManager.play('theme');
        
    canvas.style.cursor = 'none';
	// get position of mouse
    var x = window.event.offsetX;
    var y = window.event.offsetY;
            
    // mouse down in canvas
    if (x >= 0 && x <= canvas.width &&
        y >= 0 && y <= canvas.height)
    {
        context.drawImage(images.CURSOR, 0, 0, 41, 55, x, y, 41, 55);
    }
}
</script>
</head>
<body>
<section>
<canvas id="canvas" width="800" height="600" style="font-family: disney;"
	tabindex="1" style="border: 1px solid" ></canvas>
<article id="load-score">
    <table>
        <thead>
            <tr><td>High Score</td></tr>
        </thead>
        <tbody id="load">
        </tbody>
    </table>
    <button id="close">close</button>
</article>
<article id="save-score">
    <div>
        <h2>Save your score</h2>
        <input type="text" id="name" placeholder="Enter your name here..."/>
        <button id="save">save</button>
    </div>
</article>
</section>
</body>
</html>